let searchEle = document.querySelector('input[name="searchWord"]') //搜索input
let btnEle = document.querySelector('.search-btn') //搜索按钮
let navSearchEle = document.querySelector('#navSearch') //搜索
let indexEle = document.querySelector('.index')    //首页
let logistEle = document.querySelector('.top-t')    //导航
let loginEle = document.querySelector('.login')    //登录
let registEle = document.querySelector('.regist')    //注册
let backEle = document.querySelector('.back')    //退出
let personEle = document.querySelector('.person')    //   用户

/***------------------------------登录**注册跳转----------------------------**/
function loginRegist() {
    logistEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        if (target.getAttribute('class') == 'login') {
            location.href = './login.html'
        }
        if (target.getAttribute('class') == 'regist') {
            location.href = './regist.html'
        }
    })
}
loginRegist()
/********---------------------------显示账户名----------------------------------***/
function onContent() {
    let personArrayStr = localStorage.getItem('TRUEDATA') //从locaStorage获取数据
    let personList = JSON.parse(personArrayStr) || [] //转对象 默认为空
    if (personList != '') {
        loginEle.innerHTML = `${personList[0]}`
        registEle.innerHTML = '购物车'
        personEle.style.display = 'inline-block'
        backEle.style.display = 'block'
    }

    function onBack() {
        backEle.addEventListener('click', function () {
            localStorage.removeItem('TRUEDATA',)
            loginEle.innerHTML = '🙂你好！请登录'
            registEle.innerHTML = '免费注册'
            personEle.style.display = 'none'
            backEle.style.display = 'none'
            location.href = 'login.html'
        })
    }
    onBack()
}
onContent()
/** ---------------------------------tab切换栏---------------------------------*/
function onTab() {
    let tabEle = document.querySelector('.tab') //切换栏根
    let navEle = tabEle.querySelectorAll('.tab_nav .tab_ul>li') //切换栏
    let conEle = tabEle.querySelectorAll('.tab_ol>li') //切换栏内容
    function tabul() {
        for (var i = 0; i < navEle.length; i++) {
            navEle[i].setAttribute('data-index', i) //自定义属性
            navEle[i].addEventListener('click', function () {
                indexEle.style.display = 'block'
                navSearchEle.style.display = 'none'
                clear() //清除样式
                this.className = 'current'

                /*内容区*/
                let index = this.getAttribute('data-index')
                conEle[index].className = 'on'
            })
        }
    }
    // 清除样式
    function clear() {
        for (let i = 0; i < navEle.length; i++) {
            navEle[i].className = ''
            conEle[i].className = ''
        }
    }
    tabul()
}
onTab()

/** * ------------------------------首页--------------------------------------- */
function onIndex() {
    /**菜单列表*/
    function onMenu() {
        /**女装*/
        function onPromiseClothes() {
            ajaxPromise({
                method: 'get',
                url: 'http://www.xiongmaoyouxuan.com/api/tab/2?start=0'
            }).then(clothes => {
                let wear = clothes.data.category
                let clothesTitle = clothes.data.categories
                showMenuClothes(wear, clothesTitle)
                showMenu()
            }).catch(error => {
                console.log('女装网络请求出错')
            })
        }

        function showMenuClothes(clothes, clothesTitle) {
            const clothesEle = document.querySelector('.menu-first')
            let str = `                       
                 <div>${clothes.cname}</div>
                 <div><span>${clothesTitle[0].title}</span><span>${clothesTitle[1].title}</span></div>      
                    `
            clothesEle.innerHTML = str
        }
        /**女鞋*/
        function onPromiseShoe() {
            ajaxPromise({
                method: 'get',
                url: 'http://www.xiongmaoyouxuan.com/api/tab/13?start=0'
            }).then(shoe => {
                let choeName = shoe.data.category
                let shoeTitle = shoe.data.categories
                // 页面渲染
                const choeEle = document.querySelector('.menu-sen')
                let str = `
                       <div>${choeName.cname}</div>
                      `
                let shoeName = shoeTitle.map(item => {
                    return `  
                    <span>${item.title}</span>
                    `
                }).join('')
                str += shoeName
                choeEle.innerHTML = str
            }).catch(error => {
                alert('女鞋网络请求出错')
            })
        }

        /**菜单页面渲染**/
        function showMenu() {
            const menuEle = document.querySelector('#home .menu')
            const liEle = document.querySelectorAll('#home .aside>li')
            for (let i = 0; i < liEle.length; i++) {
                liEle[i].addEventListener('mousemove', function () {
                    menuEle.style.display = 'block'
                })
                liEle[i].addEventListener('mouseout', function () {
                    menuEle.style.display = 'none'
                })
            }
        }
        onPromiseClothes()
        onPromiseShoe()
    }

    /***轮播区*/
    function onAjax() {
        const xhr = new window.XMLHttpRequest
        xhr.open('GET', 'http://www.xiongmaoyouxuan.com/api/tab/1?start=0')
        xhr.setRequestHeader('x-platform', 'pc'),
            xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    let result = JSON.parse(xhr.responseText).data
                    showSwiper(result)
                    onAd(result)
                    onProduct(result.items.list)
                } else {
                    alert('网络出错', xhr.status + xhr.statusText)
                }
            }
        }
    }
    /*页面渲染*/
    function showSwiper(result) {
        const wrapperEle = document.querySelector('.swiper-wrapper')
        let str = `
                <div class="swiper-slide"><img src="${result.banners[0].imageUrl}" slt=""></div>
                <div class="swiper-slide"><img src="${result.banners[1].imageUrl}" slt=""></div>       
                <div class="swiper-slide"><img src="${result.banners[2].imageUrl}" slt=""></div>    
                
              `
        wrapperEle.innerHTML = str

        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            autoplay: true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    }

    /**广告区*/
    function onAd(result) {
        const mainAd = document.querySelector('.main-ad')
        const mainBot = document.querySelector('.main-bot')
        let adStr = `
                        <h3>${result.gridsV2[0].title}</h3>
                        <div><span>${result.gridsV2[0].text}</span><span class="iconfont icon-yuandianxiao"></span></div>
                        <img src="${result.gridsV2[0].imageUrl}" alt="">
                        `
        let botStr = `
                       <div class="clearfix one">
                                    <div class="left">
                                        <div>${result.gridsV2[2].title}</div>
                                        <div>${result.gridsV2[2].text}</div>
                                        <div><button>GO</button></div>
                                    </div>
                                    <div><img src="${result.gridsV2[2].imageUrl}" alt=""></div>
                                </div>
                                <div class="two">
                                    <div class="left">
                                        <div>${result.gridsV2[1].title}</div>
                                        <div>${result.gridsV2[1].text}</div>
                                        <div><button>GO</button></div>
                                    </div>
                                    <div><img src="${result.gridsV2[1].imageUrl}" alt=""></div>
                                </div>
                                <div class="three">
                                    <div class="left">
                                        <div>扫码下载APP</div>
                                        <div>发现更多惊喜</div>
                                    </div>
                                    <div><img src="../static/images/erweima.png" alt=""></div>
                                </div>
                      `
        mainAd.innerHTML = adStr
        mainBot.innerHTML = botStr
    }

    /**商品列表区*/
    let listAll = []
    function onProduct(productList) {
        const ulEle = document.querySelector('.list-product')
        listAll = [...listAll, ...productList]
        if (listAll.length % 4 != 0) {
            listAll.splice((listAll.length - listAll.length % 4), listAll.length % 4)

        }
        let listArr = listAll.map(item => {
            return `
                    <li onclick="onDetail(${item.id})">
                        <div><img src="${item.image}" alt=""></div>
                        <div class="list-title">
                            <div>${item.title}</div>
                            <div class="clearfix">
                                <span>天猫</span><span>包邮</span>
                            </div>
                            <div class="price">
                                <div class="clearfix">
                                    <span>￥</span><span>${String(item.price).split('.')[0]}</span><span>.${String(item.price).split('.')[1]}</span><span>${item.saleNum}已卖</span><span>${item.couponValue}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                   `
        })

        ulEle.innerHTML = listArr.join('')
    }

    /**更多接口*/
    function onPromise(pageNo) {
        let start = pageNo * 20
        ajaxPromise({
            method: 'get',
            url: `https://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=${start}&sort=0`
        }).then(data => {
            onProduct(data.data.list)
        }).catch(error => {
            alert('error网络出错')
        })
    }

    /**更多渲染*根据页数渲染  * */
    function onMore() {
        let pageNo = 0
        const moreEle = document.querySelector('.more>button')
        moreEle.addEventListener('click', function () {
            onPromise(++pageNo)
        })
    }

    /** * 返回顶部 * */
    function onBackTop() {
        const backEle = document.querySelector('#backTop>.back')
        window.onscroll = function () {
            if (getScrollTop() > 400) {
                backEle.style.display = 'block'
            } else if (getScrollTop() < 499) {
                backEle.style.display = 'none'
            }
        }
        /**平滑返回顶部*/
        backEle.addEventListener('click', function () {
            let x = document.documentElement.scrollTop || document.body.scrollTop
            let time = setInterval(function () {
                x = x - 10
                if (x < 10) {
                    x = 0
                    window.scrollTo(x, x)
                    clearInterval(time)
                }
                window.scrollTo(x, x)
            }, 5)
        })
    }

    /** 搜索功能*/


    onMenu()     //菜单
    onAjax()     //轮播
    onMore()     //加载更多
    onBackTop()  //返回顶部
}
onIndex()

/**--------------------------------9块9包邮------------------------------------*/
function onNine() {
    /**导航区*/
    function onNav() {
        ajaxPromise({
            method: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/column/29'
        }).then(res => {
            let result = res.data.subColumns
            navlist(result)
        }).catch(error => {
            console.log('导航区网络请求出错')
        })

        /**页面渲染*/
        function navlist(navList) {
            const navEle = document.querySelector('.nine-over .nav')
            let newNavList = navList.map(item => {
                return `
                        <li>${item.name}</li>
                      `
            }).join('')
            navEle.innerHTML = newNavList

            /**切换下划线*/
            const liEle = document.querySelectorAll('.nine-over .nav>li')
            function navTab() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].addEventListener('mousemove', function () {
                        clear()
                        this.className = 'nav-tab'
                    })
                    liEle[i].addEventListener('mouseout', function () {
                        clear()
                        this.className = ''
                    })
                }
            }

            /**清除样式*/
            function clear() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].className = ''
                }
            }
            navTab()
        }
    }

    /**商品列表区*/
    let listAll = []
    function onProduct(productList) {
        const ulEle = document.querySelector('.nav-product')
        listAll = [...listAll, ...productList]
        if (listAll.length % 4 != 0) {
            listAll.splice((listAll.length - listAll.length % 4), listAll.length % 4)
        }
        let listArr = listAll.map(item => {
            return `
                    <li>
                        <div><img src="${item.image}" alt=""></div>
                        <div class="list-title">
                            <div>${item.title}</div>
                            <div class="clearfix">
                                <span>天猫</span><span>包邮</span>
                            </div>
                            <div class="price">
                                <div class="clearfix">
                                    <span>￥</span><span>${String(item.price).split('.')[0]}</span><span>.${String(item.price).split('.')[1]}</span><span>${item.saleNum}已卖</span><span>${item.couponValue}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                   `
        })

        ulEle.innerHTML = listArr.join('')
    }

    /**更多接口*/
    function onPromise(pageNo) {
        let starts = pageNo * 20
        console.log('starts', starts);
        ajaxPromise({
            method: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/sub_column/7/items',
            data: {
                start: starts
            }
        }).then(data => {
            let result = data.data.list
            onProduct(result)

        }).catch(error => {
            alert('9.9更多网络出错')
        })
    }

    /**更多渲染*根据页数渲染  * */
    function onMenuMove() {
        let moreEle = document.querySelector('#nine .more>button')
        let pageNo = 0
        onPromise(pageNo)
        moreEle.addEventListener('click', function () {
            onPromise(++pageNo)
        })
    }
    onMenuMove()

    onNav() //导航区

}
onNine()

/**---------------------------------超级大额券-------------------------------*/
function onOver() {
    /**导航区*/
    function onNav() {
        ajaxPromise({
            method: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/column/170'
        }).then(res => {
            let result = res.data.subColumns
            navlist(result)
        }).catch(error => {
            console.log('导航区网络请求出错')
        })

        /**页面渲染*/
        function navlist(navList) {
            const navEle = document.querySelector('#over .nav')
            let newNavList = navList.map(item => {
                return `
                        <li>${item.name}</li>
                      `
            }).join('')
            navEle.innerHTML = newNavList

            /**切换下划线*/
            const liEle = document.querySelectorAll('#over .nav>li')
            function navTab() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].addEventListener('mousemove', function () {
                        clear()
                        this.className = 'nav-tab'
                    })
                    liEle[i].addEventListener('mouseout', function () {
                        clear()
                        this.className = ''
                    })
                }
            }

            /**清除样式*/
            function clear() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].className = ''
                }
            }
            navTab()
        }
    }

    /**商品列表区*/
    let listAll = []
    function onProduct(productList) {
        const ulEle = document.querySelector('#over .nav-product')
        listAll = [...listAll, ...productList]
        if (listAll.length % 4 != 0) {
            listAll.splice((listAll.length - listAll.length % 4), listAll.length % 4)

        }
        let listArr = listAll.map(item => {
            return `
                    <li>
                        <div><img src="${item.image}" alt=""></div>
                        <div class="list-title">
                            <div>${item.title}</div>
                            <div class="clearfix">
                                <span>天猫</span><span>包邮</span>
                            </div>
                            <div class="price">
                                <div class="clearfix">
                                    <span>￥</span><span>${String(item.price).split('.')[0]}</span><span>.${String(item.price).split('.')[1]}</span><span>${item.saleNum}已卖</span><span>${item.couponValue}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                   `
        })

        ulEle.innerHTML = listArr.join('')
    }

    /**更多接口*/
    function onPromise(pageNo) {
        let starts = pageNo * 40
        ajaxPromise({
            method: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/sub_column/174/items',
            data: {
                start: starts
            }
        }).then(data => {
            let result = data.data.list
            if (result.length == 0) {
                moreEle.innerHTML = '🙂亲！已经到底了哦'
            } else {
                onProduct(result)
            }
            console.log(data.data.list)
        }).catch(error => {
            alert('超值大额券更多网络出错')
        })
    }

    /**更多渲染*根据页数渲染  * */
    function onMore() {
        let moreEle = document.querySelector('#over .more>button')
        let pageNo = 0
        onPromise(pageNo)
        moreEle.addEventListener('click', function () {
            onPromise(++pageNo)
        })
    }
    onMore()
    onNav()

}
onOver()

/**---------------------------------降温急救穿搭-----------------------------*/
function onSolve() {
    /**导航区*/
    function onNav() {
        ajaxPromise({
            method: 'get',
            url: 'http://www.xiongmaoyouxuan.com/api/column/3183'
        }).then(res => {
            let result = res.data.subColumns
            navlist(result)
        }).catch(error => {
            console.log('降温急救穿搭导航区网络请求出错')
        })

        /**页面渲染*/
        function navlist(navList) {
            const navEle = document.querySelector('#solve .nav')
            let newNavList = navList.map(item => {
                return `
                        <li>${item.name}</li>
                      `
            }).join('')
            navEle.innerHTML = newNavList

            /**切换下划线*/
            const liEle = document.querySelectorAll('#solve .nav>li')
            function navTab() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].addEventListener('mousemove', function () {
                        clear()
                        this.className = 'nav-tab'
                    })
                    liEle[i].addEventListener('mouseout', function () {
                        clear()
                        this.className = ''
                    })
                }
            }

            /**清除样式*/
            function clear() {
                for (let i = 0; i < liEle.length; i++) {
                    liEle[i].className = ''
                }
            }
            navTab()
        }
    }

    /**商品列表区*/
    function onNavList() {
        function onPromise() {
            ajaxPromise({
                method: 'get',
                url: ' http://www.xiongmaoyouxuan.com/api/column/3183/items'
            }).then(res => {
                let result = res.data.list
                onProduct(result)
            }).catch(error => {
                console.log('急救穿搭商品列表区网络请求出错')
            })
        }
        onPromise()

        let listAll = []
        function onProduct(productList) {
            const ulEle = document.querySelector('#solve .nav-product')
            listAll = [...listAll, ...productList]
            if (listAll.length % 4 != 0) {
                listAll.splice((listAll.length - listAll.length % 4), listAll.length % 4)

            }
            let listArr = listAll.map(item => {
                return `
                    <li>
                        <div><img src="${item.image}" alt=""></div>
                        <div class="list-title">
                            <div>${item.title}</div>
                            <div class="clearfix">
                                <span>天猫</span><span>包邮</span>
                            </div>
                            <div class="price">
                                <div class="clearfix">
                                    <span>￥</span><span>${String(item.price).split('.')[0]}</span><span>.${String(item.price).split('.')[1]}</span><span>${item.saleNum}已卖</span><span>${item.couponValue}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                   `
            })

            ulEle.innerHTML = listArr.join('')
        }
    }

    /**更多接口*/
    function onMoreList() {
        const moreEle = document.querySelector('#solve .more>button')
        function onPromise(pageNo) {
            let starts = pageNo * 40
            ajaxPromise({
                method: 'get',
                url: ` http://www.xiongmaoyouxuan.com/api/column/3183/items?start=${starts}`
            }).then(data => {
                let result = data.data.list
                if (result % 4 == 0) {
                    onProduct(data.data.list)
                } else {
                    moreEle.innerHTML = '🙂亲！已经到底了哦'
                }
                console.log(data.data.list)
            }).catch(error => {
                alert('超值大额券更多网络出错')
            })
        }

        /**更多渲染*根据页数渲染  * */
        function onMore() {
            let pageNo = 0
            moreEle.addEventListener('click', function () {
                onPromise(++pageNo)
            })
        }
        onMore()
    }
    onNav()
    onNavList()
    onMoreList()
}
onSolve()

/** --------------------------------搜索功能---------------------------------*/
function onSearch() {

    /**导航区*/
    function onNav() {
        /**切换下划线*/
        const liEle = document.querySelectorAll('#search .nav>li')
        function navTab() {
            for (let i = 0; i < liEle.length; i++) {
                liEle[i].addEventListener('mousemove', function () {
                    clear()
                    this.className = 'search-tab'
                })

                liEle[i].addEventListener('mouseout', function () {
                    clear()
                    this.className = ''
                })
            }
        }

        /**清除样式*/
        function clear() {
            for (let i = 0; i < liEle.length; i++) {
                liEle[i].className = ''
            }
        }
        navTab()

    }

    /**点击搜索事件*/
    btnEle.addEventListener('click', function () {
        indexEle.style.display = 'none'
        navSearchEle.style.display = 'block'
        onNavList()
        searchEle.value = ''
    })

    /**商品列表区*/
    function onNavList() {
        function onPromise() {
            ajaxPromise({
                method: 'get',
                url: `http://www.xiongmaoyouxuan.com/api/search?word=${searchEle.value}&start=0&sort=0&couponOnly=0&minPrice=0&maxPrice=0`,
                data: {
                    word: searchEle.value
                }
            }).then(res => {
                let result = res.data.list
                onProduct(result)
            }).catch(error => {
                alert('搜索功能网络请求出错')
            })
        }
        onPromise()

        let listAll = []
        function onProduct(productList) {
            const ulEle = document.querySelector('#search .nav-product')
            listAll = [...listAll, ...productList]
            if (listAll.length % 4 != 0) {
                listAll.splice((listAll.length - listAll.length % 4), listAll.length % 4)

            }
            let listArr = listAll.map(item => {
                return `
                    <li>
                        <div><img src="${item.image}" alt=""></div>
                        <div class="list-title">
                            <div>${item.title}</div>
                            <div class="clearfix">
                                <span>天猫</span><span>包邮</span>
                            </div>
                            <div class="price">
                                <div class="clearfix">
                                    <span>￥</span><span>${String(item.price).split('.')[0]}</span><span>.${String(item.price).split('.')[1]}</span><span>${item.saleNum}已卖</span><span>${item.couponValue}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                   `
            })

            ulEle.innerHTML = listArr.join('')
        }
    }

    /**更多接口*/
    function onMoreList() {
        const moreEle = document.querySelector('#search .more>button')
        function onPromise(pageNo) {
            let starts = pageNo * 40
            ajaxPromise({
                method: 'get',
                url: ` http://www.xiongmaoyouxuan.com/api/column/3183/items?start=${starts}`
            }).then(data => {
                let result = data.data.list
                if (result % 4 == 0) {
                    onProduct(data.data.list)
                } else {
                    moreEle.innerHTML = '🙂亲！已经到底了哦'
                }
                console.log(data.data.list)
            }).catch(error => {
                alert('超值大额券更多网络出错')
            })
        }

        /**更多渲染*根据页数渲染  * */
        function onMore() {
            let pageNo = 0
            moreEle.addEventListener('click', function () {
                onPromise(++pageNo)
            })
        }
        onMore()
    }
    onNav()
    onMoreList()
}
onSearch()

/* ----------------------------------详情页ID---------------------------------*/
function onDetail(id) {
    location.href = 'detail.html?id=' + id
}


